<script lang="ts" setup>
import { markRaw } from 'vue'
import CInput from '../../CInput/CInput.vue'
import MDIcon from '../../MDIcon/MDIcon.vue'
import CToggle from '../../CToggle/CToggle.vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { dbCompanies, Company } from './helpers/dbCompanies'
import DbFormContractor from './helpers/DbFormContractor.vue'

const schema: any[] = [
  { id: 'name', label: '企業名' },
  {
    id: 'addressNum',
    label: '郵便番号',
    mode: 'edit',
    component: markRaw(CInput),
  },
  {
    label: 'icon',
    mode: 'edit',
    component: markRaw(MDIcon),
    name: 'visibility',
    events: {
      click: (pointerEvent, ctx) => {
        const formData: Company = ctx.formData
        // console.log(`formData → `, formData)
      },
    },
  },
  {
    label: 'toggle',
    mode: 'edit',
    component: markRaw(CToggle),
    events: {
      'update:modelValue': (bool, ctx) => {
        // console.log(`bool → `, bool)
        const formData: Company = ctx.formData
        // console.log(`formData → `, formData)

        // 例)
        // dbCompanies.doc(formData.id).merge({ /* ... */ })
      },
    },
  },
]

const tableInfo: TableInfo<Company> = {
  schemaColumns: schema,
  db: dbCompanies,
  componentForm: markRaw(DbFormContractor),
}
</script>

<template>
  <CAdminTable :tableInfo="tableInfo" p_Title="タイトル漢字english" />
</template>
